<template>
    <el-container style="height: 100%;">
        <el-aside style="width: 30%;margin: 5% 0 0 10%">
            <img src="../../static/img/loginHeader.jpg" alt="" style="height: 60px;">
            <p style="font-size: 42px;margin-left: 1.5%;margin-top: 30%">浙江省土地利用数据管理与分析平台</p>
            <div style="margin-left: 1.5%;margin-top: 40%">
                <el-button style="height: 60px;width: 100px;background-color: #ff678c;color: #ffffff;"
                           @click="showLoginDialog"><p style="font-size: 18px;margin-top: 15%">登录</p></el-button>
                <el-button style="height: 60px;width: 100px;background-color: #ff678c;color: #ffffff;"
                           @click="showSignDialog"><p style="font-size: 18px;margin-top: 15%">注册</p></el-button>
            </div>
        </el-aside>
        <el-main style="">
            <img src="../../static/img/loginLOGO.jpg" alt="" style="margin-top: -2%;height: 99.5%;width: 99%;">
        </el-main>
        <loginDialog></loginDialog>
        <signDialog></signDialog>
    </el-container>

</template>

<script>
    import loginDialog from '../views/loginDialog';
    import signDialog from '../views/signDialog';

    export default {
        name: "Login1",
        components: {
            loginDialog,
            signDialog,
        },
        data() {
            return {
                loginDialogVisible: false,
                signDialogVisible: false,
            }
        },
        methods: {
            showLoginDialog() {
                this.loginDialogVisible = true;
                this.$Bus.$emit('showLogin', this.loginDialogVisible);
            },
            showSignDialog() {
                this.signDialogVisible = true;
                this.$Bus.$emit('showSign', this.signDialogVisible);
            }
        }
    }
</script>

<style>

</style>